<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>年级列表</title>
</head>
<link href="${pageContext.request.contextPath}/static/core/css/style.css">
<style>
    .modal.fade.in {
        top: 90px;
    }
</style>
<body>

<script>
    <!--删除方法-->
    function remove(id) {
        var flag = confirm("您确认要执行删除操作？");
        
        if (flag) window.location.href = _baselocation + "/enrol/delete/" + id;
    }

    /**
     * 将修改的年级信息传递到后台并且隐藏模态框
     */
    function update() {
        /*获取form表达之后调用sumbit方法传递数据*/
        $("#update-enrol-form").submit();
        $("[name='enrolName']").val("");
        $("[name='enrolCount']").val("")
        $("[name='enrolContent']").val("")

        /*隐藏模态框*/
        $('#update-enrol-modal').modal('hide');
    }

    function onUpdateModal(id) {
        /*获取对应id的年级元素就是一行tr*/
        var _Dom = $('[data-enrol-code='+id+']');
        /*获取年级名称*/
        var enrolName = _Dom.find(".enrol-name").text();
        /*获取年级人数*/
        var enrolCount = _Dom.find(".enrol-count").text();
        /*获取年级的说明信息*/
        var enrolContent = _Dom.find(".enrol-content").text();
        /*在控制台中输出 作用：调试软件*/
        console.log(enrolName+""+enrolCount+""+enrolContent);
        /*设置表单信息*/
        $(".enrol-id").val(id);
        $("[name='enrolName']").val(enrolName.trim());
        $("[name='enrolCount']").val(enrolCount.trim())
        $("[name='enrolContent']").val(enrolContent.trim())
        /*显示修改模态框*/
        $('#update-enrol-modal').modal('show');
    }
    function addEnrol(){
        window.location.href = _baselocation + "/enrol/add";
    }
</script>
<!--主容器-->
<div class="row">

    <div class="col-md-12">
        <h1>年级管理</h1>
        <button type="button" class="add-enrol-btn btn btn-warning" onclick="addEnrol()">添加</button>
        <table class="table table-hover table-bordered">
            <!--表头-->
            <thead>
            <th class="info text-center">年级ID</th>
            <th class="info text-center">年级编号</th>
            <th class="info text-center">年级名称</th>
            <th class="info text-center">入学人数</th>
            <th class="info text-center">年级介绍</th>
            <th class="info text-center">操作</th>
            </thead>
            <!--表内容-->
            <tbody>
            <c:forEach var="enrol" items="${entities}" varStatus="index">
                <tr class="text-center" data-enrol-code="${enrol.id}">
                    <td>
                            ${index.count}
                    </td>
                    <td>
                            ${enrol.enrolCode}
                    </td>
                    <td class="enrol-name">
                            ${enrol.enrolName}
                    </td>
                    <td class="enrol-count">
                            ${enrol.enrolCount}
                    </td>
                    <td class="enrol-content">
                            ${enrol.enrolContent}
                    </td>
                    <td>
                        <button class="btn btn btn-info" onclick="onUpdateModal(${enrol.id})">修改</button>
                        <button class="btn btn btn-danger" onclick="remove(${enrol.id})">删除</button>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<!--修改模态框-->
<div class="modal fade" id="update-enrol-modal" tabindex="10" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改年级信息</h4>
            </div>
            <div class="modal-body">
                <!--修改区-->
                <form action="${pageContext.request.contextPath}/enrol/update" id="update-enrol-form" class="cmxform"
                      method="post">
                    <input type="hidden" name="id" class="enrol-id">
                    <div class="form-group">
                        年级名称：<input class="form-control input-lg " name="enrolName" type="text" placeholder="请输入年级名称"
                                    style="font-size: 16px">
                        <sapn class="register-prompt" style="color: red;"></sapn>
                    </div>
                    <div class="form-group">
                        年级人数：<input class="form-control input-lg" name="enrolCount" type="text" placeholder="请输入年级人数"
                                    style="font-size: 16px">
                    </div>
                    <div class="form-group">
                        年级介绍：<textarea class="form-control" name="enrolContent" id="" cols="20" rows="5"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="update()">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>
